<template>

    <div class="brand-wrapper">
        <!--导航头-->
        <div style="margin-top: 10px" >
            <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 15px">
                <el-breadcrumb-item>B2C销售管理</el-breadcrumb-item>
                <el-breadcrumb-item>销售订单管理</el-breadcrumb-item>
                <el-breadcrumb-item>销售出库订单详情</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <!--分割线-->
        <el-divider></el-divider>
        <!--分页查询条件-->
        <div style="margin-top: 20px">
            <el-form :inline="true" class="demo-form-inline" size="mini">
                <el-form-item label="订单编号">
                    <el-input v-model="searchData.id" style="width: 180px"></el-input>
                </el-form-item>
                <el-form-item  label="订单类型" style="margin-left: 20px">
                    <el-select  v-model="searchData.indentType"  placeholder="全部" >
                        <el-option v-for="item in indentTypeList" :key="item" :label="item"
                                   :value="item"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="支付方式" style="margin-left: 20px">
                    <el-select v-model="searchData.payType" placeholder="全部">
                        <el-option v-for="item in payTypeList" :key="item" :label="item"
                                   :value="item"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="订单动作" style="margin-left: 20px">
                    <el-select v-model="searchData.indentAction" placeholder="全部">
                        <el-option v-for="item in indentActionList" :key="item" :label="item"
                                   :value="item"></el-option>
                    </el-select>
                </el-form-item><br>
                <el-form-item label="订单状态">
                    <el-select v-model="searchData.indentState" placeholder="全部">
                        <el-option v-for="item in indentStateList" :key="item" :label="item"
                                   :value="item"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="下单日期" style="margin-left:20px ">
                    <div class="block">
                        <el-date-picker
                                v-model="dateOptions.startDate"
                                type="daterange"
                                range-separator="-"
                                start-placeholder="开始日期"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                end-placeholder="结束日期">
                        </el-date-picker>
                    </div>
                </el-form-item>
                <!--操作功能-->
                <el-form-item style="margin-left: 30px">
                    <!--<el-button type="primary" @click="dialogVisible=true,formData={},addIndent()">新增</el-button>-->
                    <el-button type="danger" @click="findIndentBylike()">查询</el-button>
                    <el-button type="success" size="mini" :disabled="batchIds.length<=0"
                               @click="showBatchDeleteDialog">批量删除</el-button>
                    <el-button type="warning" @click="resetForm">重置</el-button>
                </el-form-item>
            </el-form>
        </div>

        <!--分页数据-->
        <div class="data-box">
            <el-table
                    :data="tableData"
                    style="width: 100%"
                    @selection-change="selectChange">
                <!--多选框-->
                <el-table-column
                        align="center"
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="id"
                        label="订单编号"
                        width="180">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="indentType"
                        label="订单类型"
                        width="180">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="indentAction"
                        label="订单动作">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="payType"
                        label="支付方式">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="shippingType"
                        label="配送方式">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="createTime"
                        label="创建时间">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="indentState"
                        label="订单状态">
                </el-table-column>
                <!--操作选项-->
                <el-table-column
                        align="center"
                        label="操作"
                        width="200px">
                    <template v-slot = "obj">
                        <!--<el-button type="warning" size="mini" icon="el-icon-edit" ></el-button>-->
                        <el-button type="success" size="mini" icon="el-icon-zoom-in" @click="dialogVisible=true,formData.id=obj.row.id,
                        findIndentByid();findCountGoods()"></el-button>
                        <!--删除弹框-->
                        <el-popconfirm
                                confirm-button-text='确定'
                                cancel-button-text='取消'
                                icon="el-icon-info"
                                icon-color="red"
                                @confirm="deleteByIndentId"
                                placement="top"
                                title="是否要删除本条记录？"

                        >
                            <el-button slot="reference" type="danger" style="margin-left: 10px" size="mini"
                                       @click="formData.id=obj.row.id" icon="el-icon-delete"></el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>

            </el-table>
        </div>

        <!--    分页-->
        <div class="page-box" >
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="total"
                    :page-size="searchData.pageSize"
                    :current-page="searchData.currentPage"
                    @current-change="currentPageChange"
                    align="right">
            </el-pagination>

        </div>

        <!--弹框-->
        <div >
            <!--弹框-->
            <el-dialog title="" :visible.sync="dialogVisible" width="40%" >
                <el-row>
                    <el-col :span="24"><div class="grid-content bg-purple" style="font-size:medium;padding-top: 12px;padding-left: 5px" ><h4>订单基本资料</h4></div></el-col>
                </el-row>
                <el-row style="margin-top: -20px">
                    <el-col :span="5"><div class="grid-content bg-purple">订单编号:</div></el-col>
                    <el-col :span="7"><div class="grid-content bg-purple-light"><el-input v-model="backIndentData.id"></el-input></div></el-col>
                    <el-col :span="5"><div class="grid-content bg-purple">下单日期:</div></el-col>
                    <el-col :span="7"><div class="grid-content bg-purple-light"><el-input v-model="backIndentData.indentDate"></el-input></div></el-col>
                </el-row>
                <el-row style="margin-top: -20px">
                    <el-col :span="5"><div class="grid-content bg-purple">订单类型:</div></el-col>
                    <el-col :span="7"><div class="grid-content bg-purple-light"><el-input v-model="backIndentData.indentType"></el-input></div></el-col>
                    <el-col :span="5"><div class="grid-content bg-purple">订单动作:</div></el-col>
                    <el-col :span="7"><div class="grid-content bg-purple-light"><el-input v-model="backIndentData.indentAction"></el-input></div></el-col>
                </el-row>
                <el-row style="margin-top: -20px">
                    <el-col :span="5"><div class="grid-content bg-purple">业务类型:</div></el-col>
                    <el-col :span="7"><div class="grid-content bg-purple-light"></div></el-col>
                    <el-col :span="5"><div class="grid-content bg-purple">订单状态:</div></el-col>
                    <el-col :span="7"><div class="grid-content bg-purple-light"><el-input v-model="backIndentData.indentState"></el-input></div></el-col>
                </el-row>
                <el-row style="margin-top: -20px">
                    <el-col :span="24"><div class="grid-content bg-purple" style="font-size:medium;padding-top: 12px;padding-left: 5px" ><h4>收货人资料</h4></div></el-col>
                </el-row>
                <el-row style="margin-top: -20px">
                    <el-col :span="5"><div class="grid-content bg-purple" style="padding-left: 15px">收货人姓名:</div></el-col>
                    <el-col :span="7"><div class="grid-content bg-purple-light"><el-input v-model="backIndentData.consigneeName"></el-input></div></el-col>
                    <el-col :span="5"><div class="grid-content bg-purple">会员账号:</div></el-col>
                    <el-col :span="7"><div class="grid-content bg-purple-light"><el-input v-model="backIndentData.vipNumber"></el-input></div></el-col>
                </el-row>
                <el-row style="margin-top: -20px">
                    <el-col :span="5"><div class="grid-content bg-purple">联系电话:</div></el-col>
                    <el-col :span="7"><div class="grid-content bg-purple-light"><el-input v-model="backIndentData.cellphone"></el-input></div></el-col>
                    <el-col :span="5"><div class="grid-content bg-purple">联系手机:</div></el-col>
                    <el-col :span="7"><div class="grid-content bg-purple-light"><el-input v-model="backIndentData.telephone"></el-input></div></el-col>
                </el-row>
                <el-row style="margin-top: -20px">
                    <el-col :span="5"><div class="grid-content bg-purple">配送地区:</div></el-col>
                    <el-col :span="7"><div class="grid-content bg-purple-light"><el-input v-model="backIndentData.shippingRegion"></el-input></div></el-col>
                    <el-col :span="5"><div class="grid-content bg-purple">配送方式:</div></el-col>
                    <el-col :span="7"><div class="grid-content bg-purple-light"><el-input v-model="backIndentData.shippingType"></el-input></div></el-col>
                </el-row>
                <el-row style="margin-top: -20px">
                    <el-col :span="5"><div class="grid-content bg-purple">邮政编码:</div></el-col>
                    <el-col :span="7"><div class="grid-content bg-purple-light"><el-input v-model="backIndentData.postcode"></el-input></div></el-col>
                    <el-col :span="5"><div class="grid-content bg-purple">收货地址:</div></el-col>
                    <el-col :span="7"><div class="grid-content bg-purple-light"><el-input v-model="backIndentData.consigneeAddress"></el-input></div></el-col>
                </el-row>
                <el-row style="margin-top: -20px">
                    <el-col :span="5"><div class="grid-content bg-purple">配送费用:</div></el-col>
                    <el-col :span="7"><div class="grid-content bg-purple-light"><el-input v-model="backIndentData.shippingMoney"></el-input></div></el-col>
                    <el-col :span="5"><div class="grid-content bg-purple">支付方式:</div></el-col>
                    <el-col :span="7"><div class="grid-content bg-purple-light"><el-input v-model="backIndentData.payType"></el-input></div></el-col>
                </el-row>
                <el-row style="margin-top: -20px">
                    <el-col :span="5"><div class="grid-content bg-purple">自提时间:</div></el-col>
                    <el-col :span="7"><div class="grid-content bg-purple-light"><el-input v-model="backIndentData.afhalenTime"></el-input></div></el-col>
                    <el-col :span="5"><div class="grid-content bg-purple">电子邮箱:</div></el-col>
                    <el-col :span="7"><div class="grid-content bg-purple-light"><el-input v-model="backIndentData.email"></el-input></div></el-col>
                </el-row>
                <el-row style="margin-top: -20px">
                    <el-col :span="5"><div class="grid-content bg-purple" style="padding-left: 40px">汇款人:</div></el-col>
                    <el-col :span="7"><div class="grid-content bg-purple-light"><el-input v-model="backIndentData.remitter"></el-input></div></el-col>
                    <el-col :span="5"><div class="grid-content bg-purple" style="padding-left: 50px">备注:</div></el-col>
                    <el-col :span="7"><div class="grid-content bg-purple-light"><el-input v-model="backIndentData.remark"></el-input></div></el-col>
                </el-row>
                <el-row style="margin-top: -20px">
                    <el-col :span="24"><div class="grid-content bg-purple" style="font-size:medium;padding-top: 12px;padding-left: 5px" ><h4>订单商品信息</h4></div></el-col>
                </el-row>
                <el-row style="margin-top: -20px">
                    <el-col :span="24"><div class="grid-content bg-purple" style="font-size:medium;padding-top: 12px;padding-left: 5px" >
                        <el-table
                                :data="countGoods"
                                style="width: 100%"
                                height="200">
                            <el-table-column prop="goodsId" label="商品编号" width="125"></el-table-column>
                            <el-table-column prop="goodsName" label="商品名称" width="125"></el-table-column>
                            <el-table-column prop="salePrice" label="单价" width="125"></el-table-column>
                            <el-table-column prop="goodsNumber" label="数量" width="125"></el-table-column>
                            <el-table-column prop="totalMoney" label="总金额"></el-table-column>
                        </el-table>
                    </div></el-col>
                </el-row>
                <el-row style="margin-top: -20px" >
                    <el-col :span="5"><div class="grid-content bg-purple" style="padding-left: 40px">创建人:</div></el-col>
                    <el-col :span="7"><div class="grid-content bg-purple-light"><el-input v-model="backIndentData.createBy"  property="请输入创建人姓名"></el-input></div></el-col>
                    <el-col :span="5"><div class="grid-content bg-purple" style="padding-left: 50px">创建时间:</div></el-col>
                    <el-col :span="7"><div class="grid-content bg-purple-light"><el-input v-model="backIndentData.createTime"  property="请输入创建人姓名"></el-input></div></el-col>
                </el-row>
                <span slot="footer" class="dialog-footer" style="text-align: center">
            <el-button id="backButton" size="mini" type="success" @click="dialogVisible = false" >返回</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import market from "./index";

    export  default  market;
</script>

<!--src 引用css样式-->
<style src="./index.scss"  lang="scss"></style>